
<!DOCTYPE html><!--每个网页第一行 告诉浏览器按照html5格式分析-->
<html lang="zh-CN"><!--说明网页语言是简体中文-->
    <head>
        <meta charset="UTF-8"/><!--定义文档使用UTF-8字符编码，可以正确显示中文等-->
        <meta name="viewpoint" content="width=device-width,initial-scale=1.0"><!--必备，告诉浏览器让网页在不同大小的设备上都可以适应，从而实现响应式布局-->
        <link href="style.css" type="text/css" rel="stylesheet">    
        <title>Coffee</title>
    </head>
    <body>
        <header>
            <div class="banner">
                <img src="images/banner.jpg" alt="咖啡首图"/>
            </div>
        
        <nav>
            <ul>  
                <li><a href="">咖啡MENU</a></li>
                <li><a href="">咖啡COOK</a></li>
                <li><a href="">咖啡STORY</a></li>
                <li><a href="">咖啡PARTY</a></li>
            </ul>
        </nav>
        </header>


        <div class="container">
         <main>
        <aside>
            <h2>咖啡MENU</h2>
            
            <table class="menu-table">
            <thead>
                <tr>
                    <th></th>
                    <th>拿铁</th>
                    <th>卡布奇诺</th>
                    <th>摩卡</th>
                    <th>浓缩咖啡</th>
                </tr>
                <tr>
                    <th></th>
                    <th>Latte</th>
                    <th>Cappuccino</th>
                    <th>Mocha</th>
                    <th>Espresso</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td><strong>大杯</strong></td>
                    <td class="price">¥35</td>
                    <td class="price">¥35</td>
                    <td class="price">¥35</td>
                    <td class="price">¥30</td>
                </tr>
                <tr>
                    <td><strong>中杯</strong></td>
                    <td class="price">¥30</td>
                    <td class="price">¥30</td>
                    <td class="price">¥30</td>
                    <td class="price">¥25</td>
                </tr>
                <tr>
                    <td><strong>小杯</strong></td>
                    <td class="price">¥25</td>
                    <td class="price">¥25</td>
                    <td class="price">¥25</td>
                    <td class="price">¥20</td>
                </tr>

                </tbody>
            </table>

            <!--缩略图-->
            <img src="images/Mocha.jpg" alt="摩卡" class="suoluetu"/>
            <img src="images/Latte.jpg" alt="拿铁" class="suoluetu"/>
            <img src="images/Espresso.jpg" alt="浓缩咖啡" class="suoluetu"/>
            <img src="images/Cappuccino.jpg" alt="卡布奇诺" class="suoluetu"/>
        </aside>
        
        <!--右侧主体-->
        <section class="content">
        <article class="coffee-item">
            <div class="coffee-image">    
                <img src="images/Latte.jpg" alt="拿铁"/>
            </div>
            <div class="coffee-text">
                <h3>拿铁<span class="english-name">Caffe Latte</span></h3>
                <p>拿铁是意式咖啡的经典传统饮品，由浓缩咖啡、热牛奶和少量奶泡完美融合而成。口感丝滑醇厚，奶香浓郁，咖啡的微苦与牛奶的甘甜相互平衡，带来层次丰富的味觉体验。您还可以根据个人喜好添加香草、焦糖或杏仁等风味糖浆，为您定制专属的拿铁风味。</p>
            </div>
        </article>

        <article class="coffee-item">
            <div class="coffee-image">
                 <img src="images/Cappuccino.jpg" alt="卡布奇诺"/>
            </div>
            <div class="coffee-text">
                <h3>卡布奇诺<span class="english-name">Cappuccino</span></h3>
                <p>卡布奇诺采用传统工艺精心制作，由经验丰富的咖啡师将精心调制的热牛奶和细腻奶泡倾注于浓缩咖啡之上。奶泡丰富绵密，与咖啡完美融合，形成经典的层次分明的视觉效果。每一口都能感受到浓郁咖啡香与奶泡的轻盈质感，是咖啡爱好者的不二之选。</p>
            </div>
        </article>

         <article class="coffee-item">
            <div class="coffee-image"></div>
            <div class="coffee-text">

            </div>
        </article>

         <article class="coffee-item">
            <div class="coffee-image">
                <img src="images/Mocha.jpg" alt="摩卡"/>
            </div>
            <div class="coffee-text">
                    <h1>摩卡<span class="english-name">Caffè Mocha</span></h1>
                    <p>摩卡是咖啡与巧克力的完美邂逅，将香浓的摩卡酱、浓郁的浓缩咖啡和丝滑的蒸汽牛奶巧妙融合，最后点缀上轻盈的鲜奶油，再撒上一层可可粉。香甜的巧克力风味与咖啡的醇厚相得益彰，在寒冷的日子里或心情低落时，一杯温暖的摩卡总能带来满满的幸福感。</p>
                </div>
        </article>

        <article class="coffee-item">
            <div class="coffee-image">
                <img src="images/Espresso.jpg" alt="浓缩咖啡"/>
            </div>
            <div class="coffee-text">
                <h3>浓缩咖啡<span class="english-name">Espresso</span></h3>
                <p>浓缩咖啡是咖啡的精髓所在，以最浓缩的形式呈现咖啡的纯粹魅力。采用优质咖啡豆，经过精心研磨和精确萃取，呈现出浓郁的咖啡香气和醇厚的口感。表面覆盖着一层金黄色的crema（咖啡脂），带来微妙的焦糖风味，醇厚而柔和，是真正咖啡爱好者的终极选择。</p>

            </div>
        </article>
        </section>
        </main>

        <footer>
            <img src="images/banner.gif" alt="guanggao">
            <p>网站设计课程版权 2015-2020</p>
        </footer>

        </div>

        
    </body>
</html>

    